<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>科室管理</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
    <style>
        tr {
            vertical-align: middle;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="container mt-5">
        <h3>科室管理</h3>
        <hr>
        <div class="mb-3">
            <div class="accordion" id="accordionExample">
                <!-- Button trigger modal -->
                <button type="button" class="btn addbtn btn-primary " data-bs-toggle="modal"
                    data-bs-target="#exampleModal">
                    新增科室
                </button>
                <!-- Modal -->
                <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                    aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h1 class="modal-title fs-5" id="exampleModalLabel">新增科室信息</h1>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div class="mb-3">
                                    <select class="form-select " id="branch-select">
                                        <option selected value="">请选择院区</option>
                                        <option value="1">院区1</option>
                                        <option value="2">院区2</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <input type="text" class="form-control" placeholder="请输入科室名称..." id="name-input"
                                        required>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                <button type="button" class="btn btn-primary savebtn"
                                    data-bs-dismiss="modal">确认新增</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
        </div>
        <div>
            <table class="table table-bordered">
                <thead id="thead_">
                    <tr>
                        <th scope="col">科室Id</th>
                        <th scope="col">科室名称</th>
                        <th scope="col">归属分院</th>
                        <th scope="col">操作</th>
                    </tr>
                </thead>
                <tbody class="department-list">
                    <tr>
                        <td scope="col">123</td>
                        <td scope="col">科室1</td>
                        <td scope="col">分院1</td>
                        <td>
                            <button type="button" class="btn btn-primary">编辑</button>
                            <button type="button" class="btn btn-danger">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>
    <script>
        selectbybranch();
        let status = 'add';
        let updateId = null;
        select();
        // 置空
        $('.addbtn').click(() => {
            status = 'add'
            $('#name-input').val('')
            $('#branch-select').val('')
        })
        // 新增科室
        $('.savebtn').click(() => {
            if (status == 'add') {
                add();
            } else if (status == 'update') {
                update();
                status = 'add';
            }
        })
        // 新增请求
        function add() {
            $.ajax({
                method: 'get',
                url: 'http://localhost:3000/department/add',
                data: {
                    branch_id: $('#branch-select').val(),
                    name: $('#name-input').val()
                },
                success: function (data) {
                    if (data.code == 0) {
                        select();
                    } else {
                        alert(data.msg)
                    }
                },
                error: function (e) {
                    console.log(JSON.stringify(e));
                }
            })
        }
        // 编辑按钮
        $('.department-list').on('click', 'button:contains(编辑)', function () {
            let el = JSON.parse($(this).attr('el'));
            $('#name-input').val(el.name);
            $('#branch-select').val(el.branch_id);
            status = 'update';
            updateId = el.id;
        })
        // 编辑请求
        function update() {
            $.ajax({
                method: 'get',
                url: 'http://localhost:3000/department/update',
                data: {
                    id: updateId,
                    branch_id: $('#branch-select').val(),
                    name: $('#name-input').val()
                },
                success: function (data) {
                    if (data.code == 0) {
                        select();
                    } else {
                        alert(data.msg)
                    }
                },
                error: function (e) {
                    console.log(JSON.stringify(e));
                }
            })
        }

        // 删除
        $('.department-list').on('click', 'button:contains(删除)', function () {
            $.ajax({
                method: 'get',
                url: 'http://localhost:3000/department/del',
                data:
                    { id: $(this)[0].getAttribute('idx') },
                success: function (data) {
                    if (data.code == 0) {
                        select();
                    } else {
                        alert(data.msg)
                    }
                },
                error: function (e) {
                    console.log(JSON.stringify(e));
                }
            })
        })
        // 查询所有数据
        function select() {
            $.ajax({
                method: 'get',
                url: 'http://localhost:3000/department/select',
                success: function (data) {
                    render(data.data)
                },
                error: function (e) {
                    console.log(JSON.stringify(e));
                }
            })
        }
        // 渲染
        function render(data) {
            let str = ''
            data.forEach((item, index) => {
                str += `<tr>
                        <td scope="col">${item.id}</td>
                        <td scope="col">${item.name}</td>
                        <td scope="col">${item.branch_name}</td>
                        <td>
                            <button data-bs-toggle="modal" data-bs-target="#exampleModal" type="button" class="btn btn-primary" el="${JSON.stringify(item).replace(/"/g, '&quot;')}" >编辑</button>
                            <button type="button" class="btn btn-danger" idx="${item.id}">删除</button>
                        </td>
                    </tr>
                `;
            })
            $('.department-list').html(str)
        }

        // 根据分院类型查找该种类的所有数据
        // 自动生成下拉菜单
        function selectbybranch() {
            $.ajax({
                method: "get",
                url: "http://localhost:3000/doctor/selectbranch",
                success: function (data) {
                    renderbranchOption(data.data);
                },
                error: function (e) {
                    console.log(JSON.stringify(e));
                },
            });
        }
        function renderbranchOption(data) {
            let str = '<option value="" selected>请选择院区</option>';
            data.forEach(item => {
                str += `<option value="${item.id}">${item.name}</option>`
            });
            $("#branch-select").html(str);
        }

    </script>
</body>

</html>